<template>
  <div class="cascaderArea">
    <el-cascader
      v-model="handleValue"
      ref="cascader"
      :size="cascaderSize"
      :props="optionProps"
      :options="areaList"
      :show-all-levels="!isShowLast"
      placeholder="请选择"
      @change="handleChange"
      style="width: 100%; height: 30px;"
      filterable
    ></el-cascader>
  </div>
</template>
<script>
export default {
  name: 'cascaderArea',
  data() {
    return {
      selectedOptions: [],
      optionProps: {
        //expandTrigger: 'hover', //2023-4-8 hover时,如果选择器靠近右侧边缘,会导致层级少的选项不容易选中,菜单位置左右变化
        expandTrigger: 'click',
        //配置节点
        value: 'value',
        label: 'label',
        children: 'children'
      }
    }
  },
  props: {
    areaList: {
      type: Array,
      default: () => []
    },
    fieldName: {
      type: String,
      default: ''
    },
    cascaderSize: {
      type: String,
      default: 'small'
    },
    //恢复为string,2023-4-6
    value: {
      type: String,
      default: '',
    },
    isShowLast:{
      type:Boolean,
      default:false
    }
  },

  computed: {
    handleValue: {
      get() {
        //级联 value 只认最后一级 'pid,cid' //只需要cid 2023-4-9 否则不能回填
        if (this.value){
          let array = this.value.split(',')
          return array[array.length-1]
        }else{
          return  this.value
        }
      }
    }
  },

  watch: {
    isClearChecked(valNew, valOld) {
      if (valNew) {
        this.claerCascaderChecked()
      }
      this.isClearChecked = false
    }
  },

  methods: {
    handleChange(value) {
      console.log('value', value)
      // 选择的行政区
      this.$emit('getSelectedOptions', value, this.fieldName)
    },
    /*
     ** 清空选中的级联值
     */
    claerCascaderChecked() {
      this.$refs.cascader.$refs.panel.clearCheckedNodes()
      this.$refs.cascader.$refs.panel.activePath = []
    },
    // PinyinMatch(val){
    //   debugger
    //   if(val){
    //     let list = this.getTreeTitle(this.areaList,val)
    //     if(list){
    //       this.areaList = list
    //     }
    //   }
    // },
    // getTreeTitle(list, val) {
    //   let result = []
    //   for (let i = 0; i < list.length; i++) {
    //     debugger
    //     if (PinyinMatch.match(list[i].label,val)) {
    //       debugger
    //       result.push(i)
    //       break
    //     } else if (list[i].children && list[i].children.length > 0) {
    //       result = this.PinyinMatch(list[i].children, val)
    //       debugger
    //     }
    //   }
    //   return result
    // },
  }
}
</script>
<style lang="scss" scoped></style>
